<template>
	<view class="view-container">
		<u-navbar bgColor="#fff" :placeholder="true" :fixed="true" @leftClick="$back" title="浏览记录" titleStyle="{'color': '#000'}"></u-navbar>
		<view v-for="(items,indexs) in commentList" :key="indexs">
			<view class="date">
				{{items.create_time_str}}
			</view>
			<view class="item display-flex" v-for="(item,index) in items.subList" :key="index">
				<image :src="item.pic | formatImgUrl" mode="aspectFill" class="avatar"></image>
				<view class="">
					<view class="display-flex">
						<text class="name">{{item.username}}</text>
						<!-- <image
							:src="$options.filters.formatImgUrlNew(item.writer_level.is_active?item.writer_level.level.image:item.writer_level.level.hide_img)"
							@click.stop="$go('/pages/user/grade?uid='+item.membe_id)" class="jipic" mode=""
							v-if="item.writer_level&&item.writer_level.is_active">
						</image>
			
						<image v-if="item.user_level&&item.user_level.is_active"
							:src="$options.filters.formatImgUrlNew(item.user_level.is_active?item.user_level.level.image:item.user_level.level.hide_img)"
							class="biepic" mode="">
						</image> -->
					</view>
			
					<view class="timestr">
						{{item.create_time}}
					</view>
				</view>
			</view>
		</view>
		
		<view class="empytView" v-if="!commentList.length">
			<image :src="'/images/kong.png' | formatImgUrl" mode="widthFix" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				page: 1,
				commentList: []
			}
		},
		onLoad(e) {
			this.id = e.aid || ''

			this.getList()
		},
		onReachBottom() {
			this.page++;
			this.getList();
		},
		methods: {
			getList() {
				this.$api.default.request('Discover/userLook', {
					aid: this.id,
					page: this.page
				}, 'POST', false).then((res) => {
					if (res.code) {
						let commentList = this.commentList
						if (res.data.current_page > 1) {
							res.data.data.forEach((item) => {
								commentList.push(item)
							})
						} else {
							commentList = res.data.data
						}

						let newArr = [];
						commentList.forEach((item, i) => {
							let index = -1;
							let isExists = newArr.some((newItem, j) => {
								if (item.create_time_str == newItem.create_time_str) {
									index = j;
									return true;
								}
							});
							if (!isExists) {
								newArr.push({
									create_time_str: item.create_time_str,
									subList: [item]
								});
							} else {
								newArr[index].subList.push(item);
							}
						});
						this.commentList = newArr
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: rgba(242, 245, 242, 1);
	}

	.view-container {

		.date {
			padding: 8px 15px;
			font-size: 12px;
			color: #3D3D3D;
		}

		.item {
			background-color: #fff;
			padding: 8px 15px;
		}

		.avatar {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			margin-right: 6px;
		}

		.name {
			font-size: 14px;
			font-weight: bold;
			color: #3D3D3D;
		}

		.jipic {
			width: 41px;
			height:19px;
		}

		.biepic {
			width: 41px;
			height:19px;
			margin-left: 4px;
		}

		.timestr {
			font-size: 12px;
			color: #999;
		}
	}
</style>